<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/font/iconfont.css">
    <style>
        body{
            padding-bottom: 800px;
            background-color: #f5f5f5;
        }
        .input-box{
            --h:30px;
            width: 300px;
            height: var(--h);
            position: relative;
            border-bottom: 2px solid #aaa;
            margin-top: var(--h);
        }
        .input-box .placeholder{
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            font-size: 18px;
            line-height:var(--h);
            color: #aaa;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            transform: translate(0,0);
            transition: all 400ms ease;
        }
        .input-box .placeholder .iconfont{
            opacity: 0;
            cursor: pointer;
            transition: all 400ms ease;
        }
        .input-box input{
            width: 100%;
            height: 100%;
            border: none;
            outline: none;
            box-sizing: border-box;
            background-color: transparent;
            position: relative;
            font-size: 18px;
            letter-spacing: 4px;
        }
        .input-box .line{
            position: absolute;
            left: 0px;
            bottom: -2px;
            height: 0px;
            width: 0%;
            font-size: 0px;
            border: none;
            border-bottom: 2px solid #3599da;
            transition: all 400ms ease;
        }
        .active .placeholder{
            transform: translate(0,-80%);
            font-size: 14px;
            color: #3599da;
        }
        .active .placeholder .iconfont{
            opacity: 1;
            color: #aaa;
        }
        .active .line{
            width: 100%;
        }
        
    </style>
</head>
<body>
    <div id="app">
        <p>value:{{ value }}</p>
        <hr>
        <!-- <div v-bind:class=" (isFocus||value!='')?'input-box active':'input-box' "> -->
        <div class="input-box" :class=" (isFocus||value!='')?'active':'' ">
            <div class="placeholder">
                <span>Password</span>
                <span class="iconfont icon-eye" @click=" type=(type=='text'?'password':'text') "></span>
            </div>
            <input v-bind:type="type" @blur="isFocus=false" @focus="isFocus=true" @input="value=$event.target.value">
            <div class="line"></div>
        </div>

    </div>
    <script type="module"> 
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data(){
                return {
                    isFocus:false,
                    value:"",
                    type:"password"
                }
            }
        }).mount("#app")
    </script>
</body>
</html>